import React, { PureComponent, Component } from "react"
import ReactEcharts from "echarts-for-react"
import echarts from "echarts"
import { observer, inject } from "mobx-react"
import { toJS } from "mobx"

@inject("ScreenStore")
@observer
class TrendChart extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  getOption = (data, temperatures) => {
    return {
      grid: {
        left: "3%",
        right: "4%",
        bottom: "0%",
        containLabel: true,
      },
      title: {
        text: "近24小时温度趋势图",
        left: "center",
        textStyle: {
          color: "#65c6e7",
          fontSize: "16",
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#65c6e7",
          margin: 18,
          fontSize: 16,
        },
        axisTick: {
          length: 5,
          lineStyle: {
            color: "#65c6e7",
          },
        },
        data: (data[0] && data[0].times) || [],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          color: "#65c6e7",
          formatter: `{value} ${(data[0] && data[0].unit) || ""}`,
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(101,198,231,0.3)",
          },
        },
      },
      tooltip: {
        trigger: "axis",
        textStyle: { fontSize: 16 },
        formatter: (params, ticket, callback) => {
          let title = ""
          const result = params.map((item) => {
            title = `${item.axisValue}<br />`
            return `${item.seriesName}：${item.value}${(data[0] &&
              data[0].unit) ||
              ""}`
          })
          return title + result.join("<br />")
        },
        backgroundColor: "#02db72",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#0592f4",
          },
        },
      },
      series: data.map((item, index) => {
        return {
          name: temperatures[index]["spName"] || "",
          data: item.average || [],
          type: "line",
          symbol: "circle",
          symbolSize: 6,
          itemStyle: {
            normal: {
              color: "#2bfaff",
              lineStyle: {
                opacity: 0,
                color: "rgba(0,254,255,1)",
              },
            },
          },
          emphasis: {
            itemStyle: {
              color: "#fff",
              borderWidth: 2,
              borderColor: "rgba(43,250,255,0.4)",
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: ["rgba(0,254,255,0.9)", "rgba(151,244,5,0.9)"][index],
                },
                {
                  offset: 1,
                  color: ["rgba(67,144,250,0.2)", "rgba(151,244,5,0.2)"][index],
                },
              ]),
            },
          },
        }
      }),
    }
  }
  componentDidMount() {
    // let echarts_instance = this.echarts_react.getEchartsInstance()
    // let i = -1
    // this.timer = setInterval(() => {
    //   echarts_instance.dispatchAction({
    //     type: 'showTip',
    //     seriesIndex: 0,
    //     dataIndex: i,
    //   });
    //   i++;
    //   if (i > 11) {
    //     i = 0;
    //   }
    // }, 1000);
  }

  render() {
    const { dayChart } = this.store
    const { temperatures } = this.props
    if (!dayChart[0]) {
      return null
    }
    return (
      <ReactEcharts
        ref={(e) => {
          this.echarts_react = e
        }}
        style={{ padding: "0 20px" }}
        option={this.getOption(dayChart, temperatures)}
      />
    )
  }
}

export default TrendChart
